<template>
    <div id='annoDetail'>
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title" @click="cancel()">公告管理</span>/ 详情
        </div>
        <div class="list">
            <div class="list_head">
                <span class="head_name">公告信息</span>
                <el-button class="save" type="primary" v-if="Number(annoForm.annoType) == 0" @click="unpublishAnno()">撤销发布</el-button>
                <el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
            </div>
            <el-form ref="annoForm" :model="annoForm" :rules="rules" label-width="120px">
                <el-form-item label="标题:" prop="title">
                    <el-input v-model="annoForm.title" placeholder="请输入标题，不超过50个字符" class="el-input" disabled></el-input>
                </el-form-item>
                <el-form-item label="内容:" prop="content">
                    <el-input type="textarea" :autosize="{minRows: 5}" v-model="annoForm.content" style="width:70%;" disabled>
                    </el-input>
                </el-form-item>
                <el-form-item label="公告图片:" v-if="annoForm.imageUrl">
                    <img :src="annoForm.imageUrl" alt="" style="width:400px;">
                </el-form-item>
                <el-form-item label="跳转按钮:" prop="jumpType">
                    <el-radio v-model="annoForm.jumpType" label="0" disabled>无跳转</el-radio>
                    <el-radio v-model="annoForm.jumpType" label="1" disabled>体测预约</el-radio>
                </el-form-item>
                <el-form-item label="应用校区:" prop="campus">
                    <el-checkbox-group v-model="annoForm.campus" disabled>
                        <el-checkbox v-for="item in campusList" :label="item.unid" value="item.unid" :key='item.unid' disabled>{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="弹框有效期:" prop="qizhiDate" required>

                    <el-form-item prop="startTime" class="time">
                        <el-date-picker v-model="annoForm.startTime" format="yyyy/MM/dd" placeholder="yyyy/MM/dd" class="qizhiDate" :picker-options="pickerOptions0"
                            disabled></el-date-picker>
                    </el-form-item>
                    至
                    <el-form-item prop="endTime" class="time">
                        <el-date-picker v-model="annoForm.endTime" class="qizhiDate" format="yyyy/MM/dd" placeholder="yyyy/MM/dd" :picker-options="pickerOptions1"
                            disabled></el-date-picker>
                    </el-form-item>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                id: "",
                campusList: [],
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                annoForm: {
                    title: "",
                    content: "",
                    imageUrl: "",
                    startTime: new Date(),
                    endTime: new Date().setTime(
                        new Date().getTime() + 3 * 3600 * 1000 * 24
                    ),
                    jumpType: "0",
                    campus: []
                },
                rules: {
                    title: [
                        { required: true, message: "请输入标题", trigger: "blur" },
                        { min: 1, max: 50, message: "不超过50个字符", trigger: "blur" }
                    ],
                    content: [{ required: true, message: "请输入系统公告内容", trigger: "change" }],
                    campus: [
                        {
                            type: "array",
                            required: true,
                            message: "请选择系统公告应用校区",
                            trigger: "change"
                        }
                    ],
                    jumpType: [{ required: true, message: "请选择按钮跳转类型", trigger: "change" }],
                    startTime: [
                        {
                            type: "date",
                            required: true,
                            message: "请输入弹框有效期",
                            trigger: "change"
                        }
                    ],
                    endTime: [
                        {
                            type: "date",
                            required: true,
                            message: "请输入弹框有效期",
                            trigger: "change"
                        }
                    ]
                },
                actionUrl: this.$util.domain + "/adminapi/v1/basicTools/upload/one?uploadImageType=7"
            };
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.id = this.$util.getUrlParam("id");
            this.getCampus();
            this.getDetail(this.id);
        },
        methods: {
            // 编辑系统公告，获取详情
            getDetail(id) {
                let url = this.$util.domain + "/announcement/detail";
                this.$http({
                    url,
                    method: "GET",
                    params: {
                        announcementId: id
                    }
                }).then(response => {
                    if (response.data.error == 10000) {
                        let data = response.data.data;
                        this.annoForm = {
                            title: data.title,
                            content: data.content,
                            imageUrl: data.imageUrl,
                            annoType: data.annoType,
                            jumpType: data.jumpType + "",
                            campus: data.selectedCampusIds,
                            endTime: new Date(data.bounceEndTime),
                            startTime: new Date(data.bounceStartTime)
                        };
                    }
                }, (response) => {
                    this.$util.errorMsg(response.data.message);
                });
            },
            getCampus() {
                let url = this.$util.domain + "/campusadminapi/v1/tools/campuszones";
                this.$http({
                    url,
                    method: "GET"
                }).then(response => {
                    if (response.data.error == 10000) {
                        let dataList = response.data.data;
                        if (dataList && dataList.length > 0) {
                            for (let i = 0; i < dataList.length; i++) {
                                this.campusList.push({
                                    unid: dataList[i].unid,
                                    name: dataList[i].zoneName
                                });
                            }
                        }
                    }
                }, (response) => {
                    this.$util.errorMsg(response.data.message);
                });
            },
            cancel() {
                location.href = "/#/announcement";
            },
            // 撤销,updateStatus为1
            unpublishAnno() {
                this.updateStatus(this.id, 1, (response) => {
                    if (response.data.error == 10000) {
                        this.$util.successMsg("撤销成功");
                        location.href = "/#/announcement";
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            },
            updateStatus(id, status, callback) {
                let url = this.$util.domain + "/announcement/changestatus";

                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        id: parseInt(id),
                        updateStatus: status
                    })
                }).then(response => {
                    callback(response);
                });
            }
        }
    };
</script>

<style scoped>
    #annoDetail {
        padding-top: 80px;
        height: calc(100% - 100px);
    }

    .title {
        color: #0398ff;
    }

    .import {
        position: absolute;
        right: 280px;
    }

    .export {
        position: absolute;
        right: 130px;
    }

    .publish {
        position: absolute;
        right: 110px;
        background: #00c18b;
        border-radius: 0;
    }

    .search {
        margin: 20px;
    }

    .el-input {
        display: inline-block;
        width: 40%;
    }

    .time {
        display: inline-block;
        width: 15%;
        min-width: 150px;
    }

    .qizhiDate {
        display: inline-block;
        width: 100%;
    }
</style>